<template>
  <div class="add">
    <button @click="handSub">-</button>
    <input type="text" :value="inputdata"  />
    <button @click="handAdd">+</button>
  </div>
</template>

<script>
export default {
    props:['inputdata'],
    data(){
        return {
            mydata: 0
        }
    },
    methods:{
        handAdd(){
            this.mydata = this.inputdata
            this.$emit('handcount', this.inputdata + 1)
        },
        handSub(){
            this.$emit('handcount', this.inputdata - 1)
        }
    }
}
</script>

<style lang="less" scoped>
.add {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  margin-top: 25px;
  input {
    width: 100px;
    height: 25px;
    text-align: center;
    line-height: 25px;
  }
  button {
    width: 25px;
    height: 25px;
  }
}
</style>